<section class="loading">
  <section>
    <i class="loading-circle colorful"></i>
  </section>
  <section class="messages">
    <p>{text}</p>
  </section>
</section>

<style>

  .loading {
  display: flex;
  height: 100vh;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  color:var(--muted-color);
  text-align: center;
  border-radius: 6px;
  padding: 10vh 0rem;
  background-color: rgba(0,0,0,0.1);
}


.loading .messages {
  padding: 1rem 1rem;
  text-align: center;
}

i.loading-circle {
  user-select: none;
  --scale: 2.5rem;
  --color: var(--muted-color);
  display: inline-block;
  width: var(--scale);
  height: var(--scale);
  border-radius: 50%;
  border: 3px solid var(--color);
  border-top-color: transparent;
  background-color: transparent;
  animation: 0.6s linear loading-animation infinite;
}

i.loading-circle.colorful {
  --color: var(--accent-color);
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);

  }
}


</style>

<script>
  export let color = "#666";
  export let text = "Loading...";
</script>